<template>
  <div class="emr-content-module module-personalHistory">
    <div class="h3" id="personalHistory">
      个人史
      <svg-icon icon-class="question" />
    </div>

    <div class="content-wrapper" :class="{ locked: d.disabled }">
      <div class="">
        <span>出生史:</span>
        <span>
          第
          <el-input
            maxlength="5"
            :disabled="d.disabled"
            style="width: 6rem"
            v-model="d.personalHistory.fetusOrder"
            size="medium"
            v-number:2
          ></el-input>
          产
          <el-radio-group v-model="d.personalHistory.childbirthMethod">
            <el-radio :disabled="d.disabled" label="normal">顺产</el-radio>
            <el-radio :disabled="d.disabled" label="early">剖宫产</el-radio>
          </el-radio-group>
          ，
          <el-radio-group v-model="d.personalHistory.childbirthMethodOther">
            <el-radio :disabled="d.disabled" label="monthEnough">
              足月产
            </el-radio>
            <el-radio :disabled="d.disabled" label="early">早产</el-radio>
          </el-radio-group>
        </span>
        <span>
          产伤：
          <el-radio-group v-model="d.personalHistory.birthInjury">
            <el-radio :disabled="d.disabled" label="0">无</el-radio>
            <el-radio :disabled="d.disabled" label="1">有</el-radio>
          </el-radio-group>
          ，
        </span>
        <span>
          窒息:
          <el-radio-group v-model="d.personalHistory.asphyxia">
            <el-radio :disabled="d.disabled" label="0">无</el-radio>
            <el-radio :disabled="d.disabled" label="1">有</el-radio>
          </el-radio-group>
        </span>
      </div>

      <div class="">
        <span>喂养史:</span>
        <el-radio-group v-model="d.personalHistory.feedingPattern">
          <el-radio
            :disabled="d.disabled"
            label="breastFeeding"
            @change="clear('breastFeedingMonths')"
          >
            母乳喂养
            <template
              v-if="d.personalHistory.feedingPattern == 'breastFeeding'"
            >
              至
              <el-input
                :disabled="d.disabled"
                style="width: 6rem; margin: 0 1rem"
                v-model="d.personalHistory.breastFeedingMonths"
                v-number:2
              ></el-input>
              月龄
            </template>
          </el-radio>
          <el-radio
            :disabled="d.disabled"
            label="artificialFeeding"
            @change="clear('artificialFeedingMonths')"
          >
            人工喂养
            <template
              v-if="d.personalHistory.feedingPattern == 'artificialFeeding'"
            >
              从
              <el-input
                :disabled="d.disabled"
                style="width: 6rem; margin: 0 1rem"
                v-model="d.personalHistory.artificialFeedingMonths"
                v-number:2
              ></el-input>
              月龄开始添加辅食。
            </template>
          </el-radio>
          <el-radio :disabled="d.disabled" label="mixedFeeding">
            混合喂养
          </el-radio>
        </el-radio-group>
        ，
        <span>是否按时添加辅食:</span>
        <el-radio-group v-model="d.personalHistory.complementaryFoodOnTime">
          <el-radio :disabled="d.disabled" label="0">否</el-radio>
          <el-radio :disabled="d.disabled" label="1">是</el-radio>
        </el-radio-group>
        ，
        <span>有无偏食:</span>
        <el-radio-group v-model="d.personalHistory.partialEclipse">
          <el-radio :disabled="d.disabled" label="0">无</el-radio>
          <el-radio :disabled="d.disabled" label="1">有</el-radio>
        </el-radio-group>
      </div>
      <div>
        <span>生长发育史:会讲话、会走路、上学方面有否特殊</span>
        <el-radio-group
          v-model="d.personalHistory.specialInGrowth"
          @change="clear('specialInstructions')"
        >
          <el-radio :disabled="d.disabled" label="0">无</el-radio>
          <el-radio :disabled="d.disabled" label="1">有</el-radio>
        </el-radio-group>
        <el-input
          maxlength="50"
          :disabled="d.disabled"
          placeholder="输入特殊说明"
          v-if="d.personalHistory.specialInGrowth"
          size="medium"
          class="supplement-content-width"
          v-model="d.personalHistory.specialInstructions"
        ></el-input>
      </div>
      <div>
        <span>预防接种史:</span>
        <span>是否按时打预防针</span>
        <el-radio-group v-model="d.personalHistory.preventiveInjection">
          <el-radio :disabled="d.disabled" label="1">按时</el-radio>
          <el-radio :disabled="d.disabled" label="0">未按时</el-radio>
        </el-radio-group>
        ，有否不良反应
        <el-radio-group
          v-model="d.personalHistory.hasSideEffects"
          @change="clear('sideEffects')"
        >
          <el-radio :disabled="d.disabled" label="0">无</el-radio>
          <el-radio :disabled="d.disabled" label="1">有</el-radio>
        </el-radio-group>
        <el-input
          maxlength="50"
          class="supplement-content-width"
          v-if="d.personalHistory.hasSideEffects === '1'"
          size="medium"
          :disabled="d.disabled"
          placeholder="输入不良反应"
          v-model="d.personalHistory.sideEffects"
          style="width: 240px"
        ></el-input>
        <el-input
          size="medium"
          type="textarea"
          :disabled="d.disabled"
          placeholder="补充内容,限制100个字符以内 "
          :maxlength="100"
          :autosize="{ minRows: 1, maxRows: 4 }"
          v-model="d.personalHistory.others"
          style="margin-top: 0.5rem"
        ></el-input>
      </div>
    </div>
  </div>
</template>
<script>
  import { reactive, inject } from 'vue'
  import { initPersonalHistory } from './initTools'
  export default {
    name: 'personalHistory',
    setup() {
      const clearValue = inject('clearValue')

      const clear = function (val) {
        clearValue(d.personalHistory, val)
      }
      const d = reactive({
        disabled: false,
        personalHistory: initPersonalHistory(),
      })
      const getData = function () {
        return d.personalHistory
      }
      return {
        d,
        clear,
        getData,
      }
    },
  }
</script>
<style lang="scss" scoped>
  @import '@/styles/emr.scss';
</style>
